﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wiky JavaScript Labrary</title>
<link type="text/css" href="css/main.css" rel="stylesheet" />
<script type="text/javascript" src="js/wikyjs.js" ></script>
<style type="text/css">
#block1{ width:120px; height:40px;background:#9F0;}
</style>
</head>

<body>
<div id="wapper">
<!--header start-->
<div id="header">
	<div class="head_top">
    	<div class="fleft">
            <a class="top_home" title="首页" href="http://wiky.000a.biz/doc/index.html">WikyJS Home</a>
            <a class="top_blog" title="博客" href="http://wiky.cnblogs.com/">My Blog</a>
            

      </div>
        <div class="fright">
        	<a class="top_about" title="关于作者" href="http://www.cnblogs.com/wiky/articles/about.html">About Me</a>
        </div>
    </div>
    <div class="head_title">
    	<a class="head_logo" title="前端档案" href="http://wiky.cnblogs.com/">前端档案</a>
        <h1>WikyJS</h1>
        <h2>一个轻量级JavaScript库~</h2>
    </div>
    <div class="head_pos">
            <p class="curr-pos"><span>WikyJS。API：</span>简介</p>
    </div>
</div>
<!--header end-->
<!--container start-->
<div id="container">
	<div class="sideleft">
        <dl class="info">
          <dt><strong>WikyJS</strong><em>&nbsp;1.1.2</em></dt>
          <dd><span>WikyJS是一个轻量级的JavaScript辅助库，具有良好的便利性和可扩展性！</span></dd>
          <dd><div class="download"><a href="download/WikyJS.rar">下载最新版本</a></div></dd>
        </dl>
        <ul class="menu">
          <li>
            <h3><a title="基本" href="javascript:void(0)">Base</a></h3>
            <ul class="menu_list">
              <li><a title="$()" href="selector.html">$()</a></li>
              <li><a title="$().ready()" href="ready.html">$().ready()</a></li>
              <li><a title="$().html()" href="html.html">$().html()</a></li>
              <li><a title="$.extend()" href="extend.html">$.extend()</a></li>
            </ul>
          </li>
          <li>
            <h3><a title="文档对象模型" href="javascript:void(0)">DOM</a></h3>
            <ul class="menu_list">
              <li><a title="$().pageXY()" href="pageXY.html">$().pageXY()</a></li>
              <li><a title="$().style()" href="style.html">$().style()</a></li>
              <li><a title="$().hasClass()" href="hasClass.html">$().hasClass()</a></li>
              <li><a title="$().addClass()" href="addClass.html">$().addClass()</a></li>
              <li><a title="$().removeClass()" href="removeClass.html">$().removeClass()</a></li>
              <li><a title="$().setOpacity()" href="setOpacity.html">$().setOpacity()</a></li>
            </ul> 
          </li>
          <li>
            <h3><a title="事件" href="javascript:void(0)">Event</a></h3>
            <ul class="menu_list">
              <li><a title="$().bind()" href="bind.html">$().bind()</a></li>
              <li><a title="$().getMousePos()" href="getMousePos.html">getMousePos()</a></li>
            </ul>
          </li>
          <li>
            <h3><a title="拖放" href="">Drag&amp;Drog</a></h3>
            <ul class="menu_list">
              <li><a title="$().drag()" href="drag.html">$().drag()</a></li>
            </ul> 
          </li>
          <li>
            <h3><a title="动画" href="javascript:void(0)">Animation</a></h3>
            <ul class="menu_list">
              <li><a title="$().fadeIn()" href="fadeIn.html">$().fadeIn()</a></li>
              <li><a title="$().fadeOut()" href="fadeOut.html">$().fadeOut()</a></li>
              <li><a title="$().slide()" href="slide.html">$().slide()</a></li>
              <li><a title="$().slideUp()" href="slideUp.html">$().slideUp()</a></li>
              <li><a title="$().slideDown()" href="slideDown.html">$().slideDown()</a></li>
            </ul> 
          </li>
          <li>
            <h3><a title="Ajax" href="javascript:void(0)">Ajax</a></h3>
            <ul class="menu_list">
            	<li><a title="$().create()" href="javascript:alert('尚未提供示例')">$().create()</a></li>
            	<li><a title="$().ajax()" href="javascript:alert('尚未提供示例')">$().ajax()</a></li>
            </ul>
          </li>
          <li>
            <h3><a title="Cookie" href="javascript:void(0)">Cookie</a></h3>
            <ul class="menu_list">
              <li><a title="$().setCookie()" href="setCookie.html">$().setCookie()</a></li>
              <li><a title="$().getCookie()" href="getCookie.html">$().getCookie()</a></li>
              <li><a title="$().delCookie()" href="delCookie.html">$().delCookie()</a></li>
            </ul> 
          </li>
        </ul>
    </div>
	<div class="maincenter">
   	  <div class="main_demo">
        	<div class="demo_title">
           	  <h2>WikyJS 简介</h2>
              <p>WikyJS是个人兴趣而开发的一个类似jQuery的工具库，主要是为了更好地协助JS的开发，实现应用上的便利性以及跨浏览器支持。大小远远小于jQuery、YUI等主流框架，适应于中小型网站的开发。同时，也可以在此基础上扩展，开发新的功能组件。</p>
          </div>
            <div class="demo_show">
            	<p>WikyJS提供了以下功能：<br />
                	@ 基本功能，包括简单的选择器和扩展等<br />
                    @ DOM操纵和样式控制<br />
                    @ 事件处理<br />
                    @ 拖放效果<br />
                    @ 基本的动画，如淡入淡出，展开收起和滑动等<br />
                    @ Ajax访问，创建和发送请求<br />
                    @ Cookie操作<br />
           	    </p>
          </div>
          	<div class="demo_title"><br/><p>WikyJS当前仍属于早期版本的阶段，稳定性上还存在着一定欠缺，代码质量会随新版本的推出逐渐提高，功能也将逐步加强和完善。</p></div>
      </div>
        <div class="main_title">
          <h4 class="fleft">代码风格</h4></div>        
     		<p>&nbsp;&nbsp;&nbsp;&nbsp;WikyJs库提供了不同的使用方式，如果开发者青睐于jQuery的方法链的便利性，WikyJS提供的类似jQuery的接口，写法如下：</p>
     		<div class="main_code">
     		  <p>&lt;script type=&quot;text/javascript&quot;&gt;<br />
     		    $(document).ready(function(){<br />
     		    &nbsp;&nbsp;&nbsp;&nbsp;$(&quot;test&quot;).style(&quot;border&quot;,&quot;2px solid #000&quot;).drag().html(&quot;My name is wiky&quot;);<br />
     		     &nbsp;&nbsp;&nbsp;&nbsp;//   在这里写你的代码...<br />
     		    });<br />
     		    &lt;/script&gt;</p>
     		</div>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;以上代码是在DOM加载完成后，获取id为&quot;test&quot;的元素，设置其border，使其可拖放，然后再设置其文本指定内容。可以看出，WikyJS的使用方法与jQuery的相似度很高，同样支持方法链的调用，少量代码可实现较多功能，即简洁又高效。</p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;另外，WikyJS也是使用了较多的命名空间，实现上与YUI有较多的相似，如果你习惯YUI的语法，你也可以这样写：</p>
        <div class="main_code"> 
          <p>&lt;script type=&quot;text/javascript&quot;&gt;<br /> 
            wiky.event.loadEvent(function(){
<br />
&nbsp;&nbsp;&nbsp;&nbsp;wiky.drag(wiky.dom.id(&quot;test&quot;));//   使id为&quot;test&quot;的元素可拖动<br />
});<br />
&lt;/script&gt;</p>
      </div>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;关于WikyJS都是使用，这里提供了在线API文档，采用的类似jQuery的语法。另外，该库也存在着一定的缺点，如选择器的支持上不强大，无法遍历DOM树等。更强大的版本会随个人能力提高改进。</p>
      
	</div>
</div>
<!--container end-->
<!--footer start-->
<div id="footer">
     <p class="copyright_en">Copyright &copy; 2010 Mankai Wiky. <a target="_blank" href="http://wiky.cnblogs.com/">Front-End File All Rights Reserved.</a></p>
     <p class="copyright_cn">维奇-前端档案 <a target="_blank" href="http://wiky.cnblogs.com/">版权所有</a></p>
</div>
<!--footer end-->
</div>
</body>
</html>
